<template>
  <a-layout class="login-box">
    <a-layout-content class="login-content">
      <a-row align="middle" justify="center" class="login-content-main">
        <a-col class="login-content-bgc" :pull="1">
          <a-image :src="loginBg" :width="420" :height="420" :preview="false"/>
          <h2>vue3后台管理系统demo</h2>
          <p style="margin-top: 15px">
            ✨✨✨ 欢迎使用 zhuming-vue3-admin@0.0.1！
          </p>
          <p style="margin-top: 15px">
          </p>
        </a-col>
        <a-col class="login-content-form">
          <LoginForm />
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import ZyHeaderLogo from 'comps/common/ZyHeaderLogo.vue';
import { reactive, ref, computed } from 'vue';
import loginBg from '@/assets/img/avatar.jpg';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useAuthStore } from '../../../stores/auth.js';
import LoginForm from './components/LoginForm.vue';

const authStore = useAuthStore();
const formState = reactive({
  username: 'admin',
  password: 'admin',
  code: '',
  remember: true,
});
const onFinish = (values) => {
  console.log('Success:', values);
  authStore.login();
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style lang="scss" scoped>
$color-bg: #ffffff;
.login-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: $color-bg;

  .login-logo,
  .login-footer {
    color: #444343;
    background-color: $color-bg;
  }

  .login-content {
    height: 100%;

    .login-content-main {
      height: 100%;

      .login-content-bgc {
        text-align: center;
        // padding-bottom: 100px;
      }

      .login-content-form {
        border: 1px solid #e3e3e3;
        padding: 60px;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;

        .login-title {
          margin-bottom: 30px;
        }

        .login-form {
          max-width: 400px;
          background-color: #fff;
          overflow: hidden;

          .login-form-button {
            margin-right: 15px;
          }
        }
      }
    }
  }

  .login-footer {
    text-align: center;
    font-size: 0.8rem;
    color: #828181;
  }
}
</style>
